<template>
  <div v-loading="loading">
    <el-table
      :data="tableData"
      height="600"
      stripe
      border
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="p_id" label="实践序号" width="190">
      </el-table-column>
      <el-table-column prop="p_name" label="实践名称" width="190">
      </el-table-column>
      <el-table-column prop="address" label="实践地址" width="190">
      </el-table-column>
      <el-table-column prop="teacher.teacher_name" label="负责老师" width="190">
      </el-table-column>
      <el-table-column prop="start_time" label="起始时间" width="190">
      </el-table-column>
      <el-table-column prop="end_time" label="结束时间" width="190">
      </el-table-column>
      <el-table-column label="操作" width="125">
        <template slot-scope="scope">
          <el-button
            @click="rate(scope.$index)"
            type="text"
            size="medium"
            icon="el-icon-thumb circle"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="warning"
      icon="el-icon-refresh-right"
      circle
      @click="refresh"
    ></el-button>

    <el-dialog
      style="line-height:20px"
      :visible.sync="dialogVisible"
      width="40%"
      title="学生信息"
    >
        
        <el-descriptions v-for="(item,index) in choosedStudent" :key="index">
            <el-descriptions-item label="学号">{{item.s_id}}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{item.student_name}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{item.phone}}</el-descriptions-item>
            <el-descriptions-item label="进行评分"><el-rate v-model="item.score"></el-rate></el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        tableData: [],
        teacher: JSON.parse(sessionStorage.getItem("teacher")),
        studentData: [],
        loading: false,
        dialogVisible: false,
        choosedStudent:[],
        current_pid:''

    };
  },
  created() {
    this.$axios
      .post(
        "/api/teacher/selectpractice",
        this.$qs.stringify({
          t_id: this.teacher.t_id
        })
      )
      .then(res => {
        this.tableData = res.data;
      });
  },
  methods: {
    rate(index) {
      this.$axios
        .post(
          "/api/teacher/querystudent",
          this.$qs.stringify({
            t_id: this.teacher.t_id,
            p_id: this.tableData[index].p_id
          })
        )
        .then(res => {
            res.data.forEach(data => {
                this.choosedStudent.push(data.student);
            });
        });
        setTimeout(()=>{this.dialogVisible = true;},1000);
        this.current_pid=this.tableData[index].p_id;
    },



    async confirm(){
        this.dialogVisible=false;
        
        for (let item of this.choosedStudent) {
            await this.$axios.post('/api/teacher/score',this.$qs.stringify({
                p_id:this.current_pid,
                s_id:item.s_id,
                score:item.score,
                t_id:this.teacher.t_id
            })).then((res)=>{
                console.log(res);
            })
        
        }
        this.choosedStudent.length=0;
        this.$message.success('评分成功')
    },



    cancel(){this.dialogVisible=false;this.choosedStudent.length=0},



    refresh() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    }
  }
};
</script>

<style>
.marktable {
  line-height: 60px;
}
</style>
